<template>
  <div class="overlay" @mousedown="startSelection">
    <!-- 半透明遮罩层 -->
    <div class="mask"></div>
    
    <!-- 选择框 -->
    <div 
      class="selection" 
      v-if="isSelecting"
      :style="{
        left: `${selection.x}px`,
        top: `${selection.y}px`,
        width: `${selection.width}px`,
        height: `${selection.height}px`
      }"
    >
      <div class="selection-info">
        {{ selection.width }} × {{ selection.height }}
      </div>
      
      <!-- 调整手柄 -->
      <div class="resize-handle top-left" @mousedown.stop="startResizing('top-left', $event)"></div>
      <div class="resize-handle top-right" @mousedown.stop="startResizing('top-right', $event)"></div>
      <div class="resize-handle bottom-left" @mousedown.stop="startResizing('bottom-left', $event)"></div>
      <div class="resize-handle bottom-right" @mousedown.stop="startResizing('bottom-right', $event)"></div>
    </div>
    
    <!-- 操作说明 -->
    <div class="instructions">
      <p>拖动鼠标选择录制区域</p>
      <p>使用方向键微调位置，按住Shift键+方向键微调大小</p>
      <p>按Enter确认，按Esc取消</p>
      <button class="confirm-btn" @click="confirmSelection">确认选择</button>
      <button class="cancel-btn" @click="cancelSelection">取消</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 选择区域状态
const isSelecting = ref(false)
const isResizing = ref(false)
const resizeHandle = ref(null)
const selection = ref({ x: 0, y: 0, width: 0, height: 0 })
const startPos = ref({ x: 0, y: 0 })
const initialSelection = ref({ x: 0, y: 0, width: 0, height: 0 })

// 开始选择区域
const startSelection = (e) => {
  if (isResizing.value) return
  
  isSelecting.value = true
  startPos.value = { x: e.clientX, y: e.clientY }
  selection.value = {
    x: e.clientX,
    y: e.clientY,
    width: 0,
    height: 0
  }
  
  // 鼠标移动事件处理
  const handleMouseMove = (e) => {
    if (!isSelecting.value || isResizing.value) return
    
    const x = Math.min(startPos.value.x, e.clientX)
    const y = Math.min(startPos.value.y, e.clientY)
    const width = Math.abs(e.clientX - startPos.value.x)
    const height = Math.abs(e.clientY - startPos.value.y)
    
    // 确保最小尺寸
    selection.value = {
      x,
      y,
      width: Math.max(width, 100),
      height: Math.max(height, 100)
    }
  }
  
  // 鼠标释放事件处理
  const handleMouseUp = () => {
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }
  
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

// 开始调整大小
const startResizing = (handle, e) => {
  e.preventDefault()
  isResizing.value = true
  resizeHandle.value = handle
  startPos.value = { x: e.clientX, y: e.clientY }
  initialSelection.value = { ...selection.value }
  
  // 鼠标移动事件处理
  const handleMouseMove = (e) => {
    if (!isResizing.value) return
    
    const dx = e.clientX - startPos.value.x
    const dy = e.clientY - startPos.value.y
    const newSelection = { ...initialSelection.value }
    
    switch (handle) {
      case 'top-left':
        newSelection.x = initialSelection.value.x + dx
        newSelection.y = initialSelection.value.y + dy
        newSelection.width = initialSelection.value.width - dx
        newSelection.height = initialSelection.value.height - dy
        break
      case 'top-right':
        newSelection.y = initialSelection.value.y + dy
        newSelection.width = initialSelection.value.width + dx
        newSelection.height = initialSelection.value.height - dy
        break
      case 'bottom-left':
        newSelection.x = initialSelection.value.x + dx
        newSelection.width = initialSelection.value.width - dx
        newSelection.height = initialSelection.value.height + dy
        break
      case 'bottom-right':
        newSelection.width = initialSelection.value.width + dx
        newSelection.height = initialSelection.value.height + dy
        break
    }
    
    // 确保最小尺寸和位置有效
    if (newSelection.width < 100) newSelection.width = 100
    if (newSelection.height < 100) newSelection.height = 100
    if (newSelection.x < 0) newSelection.x = 0
    if (newSelection.y < 0) newSelection.y = 0
    
    selection.value = newSelection
  }
  
  // 鼠标释放事件处理
  const handleMouseUp = () => {
    isResizing.value = false
    resizeHandle.value = null
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }
  
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

// 确认选择
const confirmSelection = () => {
  if (selection.value.width > 100 && selection.value.height > 100) {
    window.electronAPI.sendAreaSelected(selection.value)
  }
}

// 取消选择
const cancelSelection = () => {
  window.electronAPI.cancelSelection()
}

// 键盘事件处理
const handleKeyDown = (e) => {
  if (!isSelecting.value) return
  
  // 方向键微调位置
  const step = 10
  const newSelection = { ...selection.value }
  
  if (e.shiftKey) {
    // 按住Shift键调整大小
    switch (e.key) {
      case 'ArrowUp':
        newSelection.height = Math.max(100, newSelection.height - step)
        break
      case 'ArrowDown':
        newSelection.height = Math.max(100, newSelection.height + step)
        break
      case 'ArrowLeft':
        newSelection.width = Math.max(100, newSelection.width - step)
        break
      case 'ArrowRight':
        newSelection.width = Math.max(100, newSelection.width + step)
        break
    }
  } else {
    // 调整位置
    switch (e.key) {
      case 'ArrowUp':
        newSelection.y = Math.max(0, newSelection.y - step)
        break
      case 'ArrowDown':
        newSelection.y = newSelection.y + step
        break
      case 'ArrowLeft':
        newSelection.x = Math.max(0, newSelection.x - step)
        break
      case 'ArrowRight':
        newSelection.x = newSelection.x + step
        break
      case 'Enter':
        confirmSelection()
        return
      case 'Escape':
        cancelSelection()
        return
    }
  }
  
  selection.value = newSelection
}

// 生命周期钩子
onMounted(() => {
  document.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeyDown)
})
</script>

<style scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.selection {
  position: absolute;
  border: 2px solid #2ecc71;
  background-color: rgba(46, 204, 113, 0.1);
  z-index: 10;
}

.selection-info {
  position: absolute;
  bottom: -25px;
  left: 0;
  background-color: #2ecc71;
  color: white;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 3px;
}

.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: white;
  border: 2px solid #2ecc71;
  border-radius: 50%;
  z-index: 20;
}

.top-left {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}

.top-right {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}

.bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}

.bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}

.instructions {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 15px;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.instructions p {
  margin: 5px 0;
  font-size: 14px;
}

.confirm-btn {
  background-color: #2ecc71;
  color: white;
  margin-right: 10px;
  margin-top: 10px;
}

.cancel-btn {
  background-color: #e74c3c;
  color: white;
  margin-top: 10px;
}
</style>
